<template>
    <el-row >
       <el-col :span="2">
           <el-button type="primary" plain @click="toTeam">团队</el-button>
       </el-col>
       <el-col :span="2">
           <el-button type="primary" plain @click="toTask">任务</el-button>
       </el-col>
      
   </el-row>
   <el-divider />
   <el-row>
       <el-col :span="1" v-for="(tab,index) in tabs">
            <el-link :underline="false" type="primary" @click="projectSearch(index)">{{tab}}</el-link>
       </el-col>
       <el-col :span="10"></el-col>
       <el-col :span="4">
           <el-input v-model="input" placeholder="项目搜索" clearable />
       </el-col>
       <el-col :span="2">
        
           <el-button type="primary" @click="search">  
               <el-icon><Search /></el-icon>Search
           </el-button>
       </el-col>
       <el-col :span="2">
       
           <el-button  type="success" @click="addTask">  
               <el-icon><Plus /></el-icon>新增
           </el-button>
       </el-col>
   </el-row>
   <el-divider />
   <el-table :data="tableData"
    style="width: 100%"
     height="250"
     :default-sort = "{prop: 'serialNumber', order: 'ascending'}"
     ref="multipleTable"
     @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column prop="serialNumber" sortable label="序号" width="120" />
       <el-table-column prop="taskName" label="任务名称" width="150" />
       <el-table-column prop="name" label="任务执行人" width="120" />
       <el-table-column prop="startTime" label="计划开始周期" width="120" />
       <el-table-column prop="endTime" label="计划结束周期" width="120" />
       <el-table-column prop="duration" label="工期" width="100" />
       <el-table-column label="进度" width="120" >
           <template #default="scope">
               <el-progress :percentage="scope.row.progress" />
           </template>
       </el-table-column>
       <el-table-column prop="overDue" label="逾期" width="120" />
       <el-table-column label="操作" fixed="right">
           <template #default="scope">
               <el-button size="small" circle @click="handleEdit(scope.$index, scope.row)"
               >
                   <Edit style="width: 1em; height: 1em; " />
                </el-button>      
               <el-button 
               size="small"
               type="danger" 
               @click="handleDelete(scope.$index, scope.row)"
                circle >
                <el-icon><Delete /></el-icon>
               </el-button> 
           </template>
       </el-table-column>
       
   </el-table>
   <el-row>
       <el-col :span="4"></el-col>
       <el-col :span="10">
           <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage4"
           :page-sizes="[5, 10, 15, 20]"
           :page-size="5"
           layout="total, sizes, prev, pager, next, jumper"
           :total="400">
           </el-pagination>
       </el-col>
      
    </el-row>
  
</template>
<script>

export default{
   data(){
       return{
           
           tabs:['全部','已完成','未完成'],
           input:'',//搜搜
           status:"exception",//项目进度
           multipleSelection: [],//选中的项
           tableData:[
               {serialNumber:'1',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'是'},
               {serialNumber:'2',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'是'},
               {serialNumber:'3',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'是'},
               {serialNumber:'4',taskName:'创建项目',name:'诸葛孔明',startTime:'2023-2-2',endTime:'2023-2-2',duration:'1',progress:'5',overDue:'否'},
               
           ],
           currentPage4: 1
       }
   },
   methods:{
       //给定条件搜索项目展示
       projectSearch(index){

       },
       //模糊搜索项目
       search(){

       },
       addTask(){
         
       },
       toTeam(){
           this.$router.push({
               path:'/research/projectTeam'
           })
       },
       toTask(){
           this.$router.push({
               name:'projectDetails'
           })
       },
       //选中
       handleSelectionChange(val) {
       this.multipleSelection = val;
     },
     handleEdit(index, row) {
       console.log(index, row);
     },
     handleDelete(index, row) {
       console.log(index, row);
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
     }
   },
   beforeMount(){
      
      
   }
}

</script>
<style>

</style>